<template>
	<div id="app">
		<header>
			<h1>我是头部</h1>
		</header>
		<section>
			<router-view></router-view>
		</section>
		<footer>
			<router-link to="/" replace>首页</router-link>
			<router-link to="/Issue">发布</router-link>
			<router-link to="/User/Melon" replace>个人中心</router-link>
		</footer>
	</div>
</template>

<script>
</script>

<style lang="scss">
	@import '~@/assets/scss/reset';
	@import '~@/assets/scss/vw';

	#app {
		header {
			height: vw(100);
			position: absolute;
			top: 0;
			left: 0;
			border-bottom: 1px solid #87CEEB;
			width: 100%;
		}

		section {
			width: 100%;
			position: absolute;
			top: vw(100);
			bottom: vw(100);
			left: 0;
		}

		footer {
			position: absolute;
			bottom: 0;
			left: 0;
			height: vw(100);
			display: flex;
			width: 100%;
			justify-content: space-around;
			border-top: 1px solid #87CEEB;
			align-items: center;

			a {
				padding: vw(16);
			}
		}
	}
</style>
